<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <title>知识产权交易在线设计与实现</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/self.css" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="css/css.css">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        .navbar-brand {
            font-size: 30px;
            font-weight: bolder;
            font-family: '宋体';
            color: black;
        }
        .primary-color {
            background-color: #2f5eb5;
        }
        .contact {
            text-align: center;
            margin-top: 20px;
        }
        .contact span {
            font-weight: bold;
        }
        .index-content-text {
            color: #777777;
            margin-top: 20px;
            margin-bottom: 20px;

        }

        #search-input {
            background-repeat: no-repeat;
            background-position: 10px 10px;
            width: 200px;
            height: 40px;
            border-radius: 20px;
            border: none;
            color: #333;
            font-size: 16px;
            outline: none;
            background-position: right 20px center;
            padding-right: 30px;
            background-size: 16px 16px;
        }

        .list-unstyled{
            color: #cccccc;
            font-size: 14px;
        }
    </style>
    <script type="text/javascript">
        new WOW().init();
    </script>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light navbar-fixed-top " style="background: linear-gradient(rgb(156, 29, 18),rgb(218, 166, 145) );" >
    <div class="container-fluid" style="margin-right: 25px;">
        <img src="image/知识产权.png" alt="" style="width: 80px;height: 50px;margin-right: 10px;">
        <a class="navbar-brand">知识产权交易在线平台</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse navbar-small" id="navbarNav" style="position: relative;overflow: hidden;">
            <ul class="navbar-nav mr-auto">

                <!-- 列表展示 -->
                <li class="nav-item">
                    <div class="nav-link" style=" color: #333;  font-size: 20px;cursor: pointer;margin-right: 20px;" >首页</div>
                </li>
                <li class="nav-item">
                    <div class="nav-link" style=" color: #333; font-size: 20px;cursor: pointer;margin-right: 20px;">新闻公告</div>
                </li>
                <li class="nav-item">
                    <div class="nav-link" style=" color: #333; font-size: 20px; cursor: pointer;margin-right: 20px;" >交易市场</div>
                </li>
                <li class="nav-item">
                    <div class="nav-link" style=" color: #333; font-size: 20px; cursor: pointer;margin-right: 20px;">数据统计</div>
                </li>
                <li class="nav-item">
                    <div class="nav-link" style=" color: #333; font-size: 20px;cursor: pointer;margin-right: 20px;">个人中心</div>
                </li>
            </ul>

            <!-- 搜索栏  -->

            <!-- <div class="navbar-nav" style="position: absolute;left: 800px; width: 200px;">
              <li class="nav-item" style="display: flex;margin-right: 10px;">
                <input type="search" id="search-input" placeholder="搜索专利" aria-label="Search docs">
              </li>
            </div> -->

        </div>
    </div>
</nav>
<div>
    <!-- 首页 -->
    <div>
        <div class="t11" style="display: block; background-color: rgb(149, 58, 52);" >
            <!-- 轮播图 -->
            <div id="carouselExampleDark" class="carousel carousel-dark slide">
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
                </div>

                <div class="carousel-inner">
                    <div class="carousel-item active" data-bs-interval="10000">
                        <img src="image/index1.jpg" class="d-block w-100">
                    </div>

                    <div class="carousel-item" data-bs-interval="2000">
                        <img src="image/index.jpg" class="d-block w-100">
                    </div>

                    <div class="carousel-item">
                        <img src="image/index5.jpg" class="d-block w-100" >
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>

            <!-- 详情内容 -->
            <div class="row">
                <div class="wow fadeInUp noticeBox">
                    <div class="main">
                        <p style="font-size: 50px;margin-bottom: 20px;line-height: 1;letter-spacing: 0.1em;color: #000;font-weight: 400;text-align: center;">挂牌企业品牌展示</p>
                    </div>
                </div>
                <div class="clear"></div>
                <div class="wow fadeInRight part1" data-wow-offset="10" >
                    <ul>
                        <li>
                            <a href="http://www.baidu.com"><img src="image/1.png"  style="width: 120px;height:120px;margin-right:5px;"></a>
                            <p>新诺科</p>
                        </li>
                        <li>
                            <a href="http://www.baidu.com"><img src="image/2.png" style="width: 120px;height:120px;margin-right:5px;"></a>
                            <p>吉聚元红</p>
                        </li>
                        <li>
                            <a href="http://www.baidu.com"><img src="image/3.png" style="width: 120px;height:120px;margin-right:5px;"></a>
                            <p>东方慧乐</p>
                        </li>
                        <li>
                            <a href="http://www.baidu.com"><img src="image/4.jpg" style="width: 120px;height:120px;margin-right:5px;"></a>
                            <p>太阳城</p>
                        </li>
                        <li>
                            <a href="http://www.baidu.com"><img src="image/5.png" style="width: 120px;height:120px;margin-right:5px;"></a>
                            <p>和华锦绣</p>
                        </li>
                    </ul>
                </div>
                <div class="clear"></div>
                <div class="wow fadeInLeft part2">
                    <div class="aboutBox">
                        <div class="L"><img src="image/知识2.jpg"></div>
                        <div class="R">知识产权交易在线平台本着“根植中华，数企共赢”的理念，立足于中华企业的经济发展、品牌发展面向全行业致力于打造一个公平、公正、公开、高效的知识产权和资本市场结合的高端创新运营平台。

                            知识产权交易在线平台通过对知识产权的文化理念、商业结构、运营方式等方面的创新，开展了以及资本驱动与企业发展的知识产权投融资综合配套服务，实现了知识产权市场与资本市场的有效结合，为促进企业知识产权和资本的共同发展，提升知识产权品牌、开辟知识产权运营新途径做出了有益尝试。同时，使更广泛的人群关注知识产权的重要性、参与知识产权事业的发展。</div>
                    </div>
                </div>
                <div class="clear"></div>
                <div class="wow fadeInUp part3">
                    <div style="text-align: center; font-size: 50px; margin-bottom: 20px; line-height: 1; letter-spacing: 0.1em; color: #000; font-weight: 400;">
                        专利展示
                    </div>
                    <ul>
                        <li style="background-color: rgb(156, 29, 18);">
                            <div class="pro">
                                <a href="http://www.baidu.com"><img src="image/p1.jpg"></a>
                            </div>
                            <a href="http://www.baidu.com"><p class="ccsl">便携除味器</p></a>
                        </li>
                        <li style="background-color: rgb(156, 29, 18);">
                            <div class="pro">
                                <a href="http://www.baidu.com"><img src="image/p2.jpg"></a>
                            </div>
                            <a href="http://www.baidu.com"><p class="ccsl">社区配送机器人</p></a>
                        </li>
                        <li style="background-color: rgb(156, 29, 18);">
                            <div class="pro">
                                <a href="http://www.baidu.com"><img src="image/p3.jpg"></a>
                            </div>
                            <a href="http://www.baidu.com"><p class="ccsl">厨余垃圾处理机</p></a>
                        </li>
                        <li style="background-color: rgb(156, 29, 18);">
                            <div class="pro">
                                <a href="http://www.baidu.com"><img src="image/p4.jpg"></a>
                            </div>
                            <a href="http://www.baidu.com"><p class="ccsl">厨余垃圾处理机</p></a>
                        </li>
                        <li style="background-color: rgb(156, 29, 18);">
                            <div class="pro">
                                <a href="http://www.baidu.com"><img src="image/p5.jpg"></a>
                            </div>
                            <a href="http://www.baidu.com"><p class="ccsl">牙刷消毒架</p></a>
                        </li>
                        <li style="background-color: rgb(156, 29, 18);">
                            <div class="pro">
                                <a href="http://www.baidu.com"><img src="image/p6.jpg"></a>
                            </div>
                            <a href="http://www.baidu.com"><p class="ccsl">小型衣物便携烘干杀菌机</p></a>
                        </li>
                        <li style="background-color: rgb(156, 29, 18);">
                            <div class="pro">
                                <a href="http://www.baidu.com"><img src="image/p7.jpg"></a>
                            </div>
                            <a href="http://www.baidu.com"><p class="ccsl">小型衣物便携烘干杀菌机</p></a>
                        </li>
                        <li style="background-color: rgb(156, 29, 18);">
                            <div class="pro">
                                <a href="http://www.baidu.com"><img src="image/p8.jpg"></a>
                            </div>
                            <a href="http://www.baidu.com"><p class="ccsl">JELLYFAN便携挂脖风扇</p></a>
                        </li>
                    </ul>
                </div>

                <div class="clear" style="height: 100px;"></div>
            </div>

            <!-- 大赛介绍 -->
            <div class="title-image" style="margin-top: 40px; margin-bottom: 30px; text-align: left;">
                <img src="image/title-image.jpg" width="100%" alt>
            </div>
            <div class="index-context" style="display: flex;justify-content: space-between;">
                <div class="intro-box col-md-6 adi-awards" style="margin-left: 50px;">
                    <h2>第七届中华设计奖 </h2>
                    <br>
                    <p style="font-size:23px;text-align:justify;color: #333;font-weight: normal;">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;创新驱动，设计未来。第七届中华设计奖以“质创新生活”为主题，旨在促进中华传统文化传承与创新，以文化为抓手，助力地方产业快速发展。鼓励设计师深入挖掘中华优秀传统文化的内在精神，通过设计作品传达追求至善的理念，探索文化传承与创新的更多可能性。
                    </p>
                </div>
                <div class="col-md-1"></div>
                <div class="news-box col-md-5">
                    <img src="image/20240623111813-001.png!adL" >
                </div>
            </div>

            <!-- 大赛赛道 -->
            <div class="title-image" style="margin-top: 40px; margin-bottom: 30px; text-align: left;">
                <img src="image/title-image2.jpg"  alt>
            </div>
            <div class="index-context" style="display: flex;justify-content: space-between;">
                <div class="row award-s" style="margin-left: 50px;">

                    <h2 class ="index-content-text">01 中华设计奖“常设赛道”</h2>
                    <h3>面向海峡两岸、港澳及海外设计机构、企事业单位、商业组织、个人原创设计师及院校师生(含“职教赛道”和“高教赛道”参赛群体)，设立产品组与概念组。</h3>
                    <h2 class ="index-content-text">02 中华设计奖“职教赛道”</h2>
                    <h3>面向职业院校艺术设计类专业在校学生，参赛者须选择中华设计奖“常设赛道”或中华设计奖“地方赛道”一个或多个命题进行创作分别投稿。</h3>
                    <h2 class ="index-content-text">03 中华设计奖“高教赛道”暨浙江省大学生工业设计竞赛</h2>
                    <h3> “质创新生活”主题</h3>
                    <h3>面向海峡两岸、港澳及海外普通高校全日制在校大学生，参赛者须选择中华设计奖“常设赛道”或中华设计奖“地方赛道”一个或多个命题进行创作分别投稿。</h3>
                    <h3> “新移动·新生活”主题</h3>
                    <h3>面向浙江省全日制高校在校大学生。</h3>
                    <h2 class ="index-content-text">04 中华设计奖“地方赛道”</h2>
                    <h3>面向海峡两岸、港澳及海外设计机构、企事业单位、商业组织、个人原创设计师及院校师生(含“职教赛道”和“高教赛道”参赛群体)。</h3>
                </div>
            </div>
            <!-- 比赛日程 -->
            <div class="title-image" style="margin-top: 40px; margin-bottom: 30px; text-align: left;">
                <img src="image/title-image3.jpg" width="100%" alt>
            </div>
            <div class="index-context" style="display: flex;justify-content: space-between;">
                <img src="image/index3.jpg" width="100%" alt>
            </div>
            <!-- 参赛方式 -->

            <div class="title-image" style="margin-top: 40px; margin-bottom: 30px; text-align: left;">
                <img src="image/title-image4.jpg" width="100%" alt>
            </div>
            <div class="index-context" style="display: flex;justify-content: space-between;margin-left: 50px; margin-right: 50px; margin-top: 40px;">
                <div class="text-center col-md-2 col-md-offset-1">
                    <a href="login.html">
                        <img src="image/1.jpg" width="60%" alt>
                    </a>
                </div>
                <div class="text-center col-md-1" style="line-height: 100px;">
                    <img src="image/11.jpg" width="80%" alt>
                </div>
                <div class="text-center col-md-2 col-md-offset-1">
                    <a href="login.html">
                        <img src="image/2.jpg" width="60%" alt>
                    </a>
                </div>
                <div class="text-center col-md-1" style="line-height: 100px;">
                    <img src="image/11.jpg" width="80%" alt>
                </div>
                <div class="text-center col-md-2 col-md-offset-1">
                    <a href="login.html">
                        <img src="image/3.jpg" width="60%" alt>
                    </a>
                </div>
                <div class="text-center col-md-1" style="line-height: 100px;">
                    <img src="image/11.jpg" width="80%" alt>
                </div>
                <div class="text-center col-md-2 col-md-offset-1">
                    <a href="login.html">
                        <img src="image/4.jpg" width="60%" alt>
                    </a>
                </div>
            </div>

        </div>



        <!-- 新闻公告 -->

        <div class="t11" style="display: none;background-color: rgb(183, 89, 82);">

            <div class="news-item">
                <div>  <img src="http://crm_intellectual_property.wxhaowan.com/upload/article/2023/02-15/0a23761059d424f2df1d0959e1836c9b.png" class="newsphoto"></div>
                <div>
                    <a href="login.html" class="news-title" target="_blank">我国发明专利有效量达421.2万件！（新数据 新看点）</a><br>
                    <p class="news-date">2023-02-15 10:26:20</p>
                </div>
            </div>

            <div class="news-item">
                <div>  <img src="http://crm_intellectual_property.wxhaowan.com/upload/article/2022/06-06/035b1337c6f92fb21db7744487679170.jpg" class="newsphoto"></div>
                <div>
                    <a href="login.html" class="news-title" target="_blank">江苏知识产权证券化试点再上新台阶</a><br>
                    <p class="news-date">2022-06-06 09:48:53</p>
                </div>
            </div>

            <div class="news-item">
                <div>  <img src="http://crm_intellectual_property.wxhaowan.com/upload/article/2022/04-20/127f98a753d552d703e7bdd90c0167ea.jpg" class="newsphoto"></div>
                <div>
                    <a href="login.html" class="news-title" target="_blank">江苏印发《江苏省知识产权强省建设纲要（2021-2035年）》</a><br>
                    <p class="news-date">2022-05-17 10:42:04</p>
                </div>
            </div>

            <div class="news-item">
                <div>  <img src="http://crm_intellectual_property.wxhaowan.com/upload/article/2022/04-20/127f98a753d552d703e7bdd90c0167ea.jpg" class="newsphoto"></div>
                <div>
                    <a href="login.html" class="news-title" target="_blank">《中共中央 国务院关于加快建设全国统一大市场的意见》发布，涉及这些知识产权内容</a><br>
                    <p class="news-date">2022-04-20 15:20:06</p>
                </div>
            </div>

            <div class="news-item">
                <div>  <img src="http://crm_intellectual_property.wxhaowan.com/upload/article/2022/04-20/127f98a753d552d703e7bdd90c0167ea.jpg" class="newsphoto"></div>
                <div>
                    <a href="login.html" class="news-title" target="_blank">规范探索知识产权证券化研讨会暨海南国际知识产权交易中心开业仪式在海南海口隆重举办</a><br>
                    <p class="news-date">2022-04-13 10:55:53</p>
                </div>
            </div>

            <div class="news-item">
                <div>  <img src="http://crm_intellectual_property.wxhaowan.com/upload/article/2022/04-13/1063ca2dd9811c7f461752cc99d4dc4f.jpg" class="newsphoto"></div>
                <div>
                    <a href="login.html" class="news-title" target="_blank">江苏宇磁知识产权交易有限公司与海南国际知识产权交易中心已确立全方位战略合作关系</a><br>
                    <p class="news-date">2022-04-13 10:36:20</p>
                </div>
            </div>

            <div class="news-item">
                <div>  <img src="https://img.cidip.cn/topic/cover/94ee08931dc9afd6eeff8347081a33fe.jpg!adM" class="newsphoto"></div>
                <div>
                    <a href="login.html" class="news-title" target="_blank">赛事资讯|第六届中华设计奖设计大赛，将进入评审阶段</a><br>
                    <p class="news-date">2022-04-12 14:47:29</p>
                </div>
            </div>

            <div class="news-item">
                <div>  <img src="https://img.cidip.cn/topic/cover/7dd266940224021949ca1ef3875b6da6.jpg!adM" class="newsphoto"></div>
                <div>
                    <a href="login.html" class="news-title" target="_blank">延期通知！第六届中华设计奖设计大赛公众报名延期三天</a><br>
                    <p class="news-date">2022-04-12 10:09:57
                    </p>
                </div>
            </div>


        </div>


        <!-- 交易市场 -->
        <div class="t11" style="display: none;background-color: rgb(183, 89, 82);">
            <div class="row row-cols-1 row-cols-md-3 g-4" style="margin-left: 50px;margin-right: 50px;">
                <!-- 专利卡片模板 -->
                <div class="col" style="margin-left: 30px; margin-right: 20px; margin-top: 40px;">
                    <div class="card h-100 shadow-sm">
                        <div class="card-header">
                            5-取代吲哚啉手性胺、其制备方法及其在赛洛多辛的制备中的应用申
                        </div>
                        <div class="card-body">
                            <p class="card-text">持有者: 	浙江大学</p>
                            <p class="card-text">交易价: ￥200,000</p>
                            <p class="card-text">编号: 001</p>

                        </div>
                        <div class="card-footer">
                            <button type="button" class="btn btn-primary buy-patent-btn" data-bs-toggle="modal" data-bs-target="#purchaseModal">
                                购买
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col" style="margin-left: 30px; margin-right: 20px; margin-top: 40px;">
                    <div class="card h-100 shadow-sm">
                        <div class="card-header">
                            一种坡面安全减速带、一种车辆智能停泊系统等2件专利转让
                        </div>
                        <div class="card-body">
                            <p class="card-text">持有者: 	宁波工程学院</p>
                            <p class="card-text">交易价: ￥20,000</p>
                            <p class="card-text">编号: 002</p>
                        </div>
                        <div class="card-footer">
                            <button type="button" class="btn btn-primary buy-patent-btn" data-bs-toggle="modal" data-bs-target="#purchaseModal">
                                购买
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col" style="margin-left: 30px; margin-right: 20px; margin-top: 40px;">
                    <div class="card h-100 shadow-sm">
                        <div class="card-header">
                            《一种利用毛细作用进行集水发电的装置及方法》
                        </div>
                        <div class="card-body">
                            <p class="card-text">持有者: 宁波工程学院</p>
                            <p class="card-text">交易价: ￥10,000</p>
                            <p class="card-text">编号：003</p>
                        </div>
                        <div class="card-footer">
                            <button type="button" class="btn btn-primary buy-patent-btn" data-bs-toggle="modal" data-bs-target="#purchaseModal">
                                购买
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col" style="margin-left: 30px; margin-right: 20px; margin-top: 40px;">
                    <div class="card h-100 shadow-sm">
                        <div class="card-header">
                            一种基于边缘计算的电力终端云边端协同安全接入认证方法等4件成果
                        </div>
                        <div class="card-body">
                            <p class="card-text">持有者: 浙江大学</p>
                            <p class="card-text">交易价: ￥381,933.00</p>
                            <p class="card-text">编号: 004</p>
                        </div>
                        <div class="card-footer">
                            <button type="button" class="btn btn-primary buy-patent-btn" data-bs-toggle="modal" data-bs-target="#purchaseModal">
                                购买
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col" style="margin-left: 30px; margin-right: 20px; margin-top: 40px;">
                    <div class="card h-100 shadow-sm">
                        <div class="card-header">
                            钢渣钢屑防辐射混凝土及其制备方法
                        </div>
                        <div class="card-body">
                            <p class="card-text">持有者: 衢州学院</p>
                            <p class="card-text">交易价: ￥100,000</p>
                            <p class="card-text">编号：005</p>

                        </div>
                        <div class="card-footer">
                            <button type="button" class="btn btn-primary buy-patent-btn" data-bs-toggle="modal" data-bs-target="#purchaseModal">
                                购买
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col" style="margin-left: 30px; margin-right: 20px; margin-top: 40px;">
                    <div class="card h-100 shadow-sm">
                        <div class="card-header">
                            基于IOT通讯技术的可插拔新型充电系统
                        </div>
                        <div class="card-body">
                            <p class="card-text">持有者: 宁波三明电力发展有限公司</p>
                            <p class="card-text">交易价: ￥50,000</p>
                            <p class="card-text">编号: 006</p>
                        </div>
                        <div class="card-footer">
                            <button type="button" class="btn btn-primary buy-patent-btn" data-bs-toggle="modal" data-bs-target="#purchaseModal">
                                购买
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col" style="margin-left: 30px; margin-right: 20px; margin-top: 40px;">
                    <div class="card h-100 shadow-sm">
                        <div class="card-header">
                            基于IOT通讯技术的可插拔新型充电系统
                        </div>
                        <div class="card-body">
                            <p class="card-text">持有者: 宁波三明电力发展有限公司</p>
                            <p class="card-text">交易价: ￥10,000</p>
                            <p class="card-text">编号: 007</p>
                        </div>
                        <div class="card-footer">
                            <button type="button" class="btn btn-primary buy-patent-btn" data-bs-toggle="modal" data-bs-target="#purchaseModal">
                                购买
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col" style="margin-left: 30px; margin-right: 20px; margin-top: 40px;">
                    <div class="card h-100 shadow-sm">
                        <div class="card-header">
                            自立式输电塔塔身拉线加固技术
                        </div>
                        <div class="card-body">
                            <p class="card-text">持有者: 国网浙江省电力有限公司温州供电公司</p>
                            <p class="card-text">交易价: $70,000</p>
                            <p class="card-text">编号：008</p>
                        </div>
                        <div class="card-footer">
                            <button type="button" class="btn btn-primary buy-patent-btn" data-bs-toggle="modal" data-bs-target="#purchaseModal">
                                购买
                            </button>
                        </div>
                    </div>
                </div>



            </div>
            <div class="modal fade" id="purchaseModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">确认购买</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            确认要购买此专利吗？
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary">确认购买</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="contact">
                <span>预约服务：</span>
                <span class="phone">客服电话 111-1111111</span>
            </div>
        </div>

        <!-- 数据统计 -->
        <div class="t11" style="display: none;">



            <div class="row" >
                <div >
                    <!-- 专利申请趋势折线图容器 -->
                    <div id="patentApplicationTrend" style="height:400px;"></div>
                </div>
                <div >
                    <!-- 专利类别分布饼图容器 -->
                    <div id="patentCategoryDistribution" style="height:400px;"></div>
                </div>


            </div>




        </div>

        <!-- 个人中心 -->
        <div class="t11" style="display: none;">
            <div style="margin-top: 20px;">
                <h1 class="text-center mb-4">个人中心</h1>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>专利名称</th>
                        <th>专利编号</th>
                        <th>交易价格</th>
                        <th>交易时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>专利A</td>
                        <td>PT2023001</td>
                        <td>$100,000</td>
                        <td>2023-04-01</td>
                        <td>
                            <button class="btn btn-sm btn-danger delete-patent-btn">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="contact">
                <span>预约服务：</span>
                <span class="phone">客服电话 111-1111111</span>
            </div>
        </div>

        <!--  -->
        <div class="t11" style="display: none;">

            <div style="display: flex;justify-content: space-between;">

                <div class="card" style="width: 18rem;margin: 20px 20px 20px 20px;">
                    <img src="image/社会服务1.jpg" class="card-img-top">
                    <div class="card-body">
                        <h4 class="card-text" style="font-weight: bold;">泰康之家·徽园</h4>
                        <p style="font-weight: lighter;color: red;">￥3500元起/月</p>
                        <a href="https://www.baidu.com/" class="btn btn-primary">立即报名</a>
                    </div>
                </div>

                <div class="card" style="width: 18rem;margin: 20px 20px 20px 20px;">
                    <img src="image/社会服务1.jpg" class="card-img-top">
                    <div class="card-body">
                        <h4 class="card-text" style="font-weight: bold;">夕阳红养老集团</h4>
                        <p style="font-weight: lighter;color: red;">￥3500元起/月</p>
                        <a href="https://www.baidu.com/" class="btn btn-primary">立即报名</a>
                    </div>
                </div>

                <div class="card" style="width: 18rem;margin: 20px 20px 20px 20px;">
                    <img src="image/社会服务1.jpg" class="card-img-top">
                    <div class="card-body">
                        <h4 class="card-text" style="font-weight: bold;">光明老年护理院</h4>
                        <p style="font-weight: lighter;color: red;">￥2500元起/月</p>
                        <a href="https://www.baidu.com/" class="btn btn-primary">立即报名</a>
                    </div>
                </div>

                <div class="card" style="width: 18rem;margin: 20px 20px 20px 20px;">
                    <img src="image/社会服务1.jpg" class="card-img-top">
                    <div class="card-body">
                        <h4 class="card-text" style="font-weight: bold;">丰盛爱心护理院</h4>
                        <p style="font-weight: lighter;color: red;">￥3500元起/月</p>
                        <a href="https://www.baidu.com/" class="btn btn-primary">立即报名</a>
                    </div>
                </div>
            </div>



        </div>
    </div>
</div>>
    <div style="background: #777777 none repeat scroll 0 0;margin-top: 50px;margin-bottom: 0px;">
        <!-- <footer>
            <div class="row">
              <div class="col-md-5 column">
              </div>
              <div class="col-md-7 hidden-xs">
                <div class="row" style="margin-top: 20px;">
                  <div class="col-md-3 column">
                    <div style="color: #f8f8f8;font-weight: bold;margin-bottom: 5px;">网站导航</div>
                    <ul class="list-unstyled" style="color: #cccccc;">
                      <li>主页</li>
                      <li>资讯</li>
                      <li>设计作品</li>
                      <li>个人中心</li>
                    </ul>
                  </div>
                  <div class="col-md-3 column">
                    <div style="color: #f8f8f8;font-weight: bold;margin-bottom: 5px;">关于我们</div>
                    <ul class="list-unstyled">
                      <li>平台介绍</li>
                      <li>联系我们</li>
                      <li>加入团队</li>
                    </ul>
                  </div>
                  <div class="col-md-3 column">
                    <div style="color: #f8f8f8;font-weight: bold;margin-bottom: 5px;">法律法规</div>
                    <ul class="list-unstyled">
                      <li>隐私条款</li>
                      <li>免责声明</li>
                      <li>意见建议</li>
                    </ul>
                  </div>
                  <div class="col-md-3 column">
                    <div style="color: #f8f8f8;font-weight: bold;margin-bottom: 5px;">联系我们</div>
                    <ul class="list-unstyled">
                      <li>电话：0571-86801919</li>
                      <li>邮箱：info@cidip.cn</li>

                    </ul>
                  </div>
                </div>
        </div>
              </div>
            </div>
        </footer> -->
    </div>


    <script>
        var t1 = document.querySelectorAll('.nav-item');
        var t11 = document.querySelectorAll('.t11');
        console.log(t1.length);
        for(let i=0;i<t1.length;i++){
            t1[i].onclick = function(){
                for(var j=0;j<t11.length;j++){
                    if(j != i){
                        t11[j].style.display = 'none';
                    }
                    else{
                        t11[j].style.display = 'block';
                    }
                }

            }
        }
        document.querySelectorAll('.delete-patent-btn').forEach(button => {
            button.addEventListener('click', function(event) {
                // 阻止按钮的默认行为（如果有）
                event.preventDefault();

                // 找到当前按钮所在的行（tr元素）
                const row = this.closest('tr');

                // 询问用户是否确认删除
                if (confirm('确定要从列表中移除此专利吗？')) {
                    // 用户确认，从DOM中移除该行
                    row.remove();

                    // 可以在这里添加其他操作，例如显示一条消息告知用户删除成功
                    alert('专利已从列表中移除。');
                }
            });
        });
        //数据统计
        var chartDom = document.getElementById('patentApplicationTrend');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            xAxis: {
                type: 'category',
                data: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 132, 101, 134, 90],
                type: 'line'
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        var chartDom = document.getElementById('patentCategoryDistribution');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '75%',
                    data: [
                        {value: 335, name: '发明专利'},
                        {value: 310, name: '实用新型'},
                        {value: 234, name: '外观设计'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        myChart.setOption(option);

    </script>
    <script src="js/echarts.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>
